<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .register {
            width: 400px;
            border: 1px solid #e15761;
            border-radius: 8px;
            padding: 20px;
        }
        label {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }
        .err-email {
            display: none;
            position: absolute;
            top: xxxx;
            left: xxxxx;
        }
    </style>
</head>
<body>
    <h1>注册页面</h1>
    <form class="register">
        <label>姓名</label>
        <input class="namee" type="text">
        <br>
        <label>登陆名</label>
        <input class="username" type="text">
        <br>
        <label>密码</label>
        <input class="password" type="text">
        <br>
        <label>再次输入密码</label>
        <input class="repassword" type="text">
        <br>
        <label>邮箱</label>
        <input class="email" type="text">
        <span class="err-email">email不能为空！</span>
        <br>
        <label>性别</label>
        <input name="sex" class="sex" type="radio" value="1">男
        <input name="sex" class="sex" type="radio" value="2">女
        <br>
        <label>爱好</label>
        <input class="hobby" type="checkbox" value="sing">唱
        <input class="hobby" type="checkbox" value="dance">跳
        <input class="hobby" type="checkbox" value="rap">rap
        <input class="hobby" type="checkbox" value="basketball">打篮球
        <br>
        <br>
        <button type="reset">重置</button>
        <button type="submit" class="submit">提交</button>
    </form>
    <script>
        var form = document.querySelector('form');
        var namee = document.querySelector('.namee');
        var password = document.querySelector('.password');
        var repassword = document.querySelector('.repassword');
        var email = document.querySelector('.email');
        // document.querySelector('.name')
        // form.onsubmit = function() {
        //     console.log(namee);
        //     return false
        // }
        var btn = document.querySelector('.submit');
        btn.onclick = function(e) {
            e.preventDefault()
            // 名字不能为空,而且不能有数字
            if(namee.value && vaildName(namee.value)) {
                console.log('name校验通过');
            }
            // 密码和再次输入密码 长度至少6位，且内容应该一样
            if(password.value.length >= 6 && repassword.value.length >= 6) {
                console.log('密码校验通过');
            }
            if(password.value === repassword.value) {
                console.log('两次密码一致');
            }
            // 邮箱不能为空 而且要包含@和.
            if(email.value && email.value.includes('@') && email.value.includes('.')) {
                console.log('邮箱校验通过');
            }
        }
        // 校验名字中是否有数字，思路：遍历字符串，判断每一项是否为数字
        function vaildName (str) {
            for (var i = 0; i < str.length; i++) {
                // 判断是否为数字
                if(isNaN(Number(str.substring(i, i+1))) == false) {
                    console.log('不能包含数字！');
                    return false
                }
            }
        }
    </script>
</body>
</html>